<template>
  <div class="Team-container">
    <div class="table-wrap">
      <v-skeleton-loader
        height="100%"
        v-if="loading"
        type="list-item@20"
      ></v-skeleton-loader>
      <Table
        v-else
        @add="openAddTeam"
        @edit="openEditTeam"
        @delete="openDeleteTeam"
        :headers="tableHeaders"
        :items="items"
        addTooltip="Add Team"
        editTooltip="Edit Team"
        deleteTooltip="Delete Team"
        hide-default-footer
      >
      </Table>
    </div>
    <Dialog
      v-model="showDialog"
      @submit="save"
      :show-save="step !== 3"
      :title="dialogTitle"
      width="480"
    >
      <AddEditTeam
        v-if="step === 1 || step === 2"
        ref="addEditTeam"
      ></AddEditTeam>
      <DeleteTeam
        v-else-if="step === 3"
        @delete="deleteTeam"
        ref="deleteTeam"
        :item="selectedItem"
      ></DeleteTeam>
    </Dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Table from "@/components/Maintenance/Table/Table.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import AddEditTeam from "@/components/Maintenance/Team/AddEditTeam.vue";
import DeleteTeam from "@/components/Maintenance/Team/DeleteTeam.vue";
interface ITeamItem {
  id: string;
  team: string;
  description: string;
}
@Component({
  components: {
    Table,
    Dialog,
    AddEditTeam,
    DeleteTeam,
  },
})
export default class Team extends Vue {
  loading = false;
  // 1.AddTeam 2.EditTeam 3.DeleteTeam
  step = -1;
  // dialog
  showDialog = false;
  dialogTitle = "";
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }
  // Table
  selectedItem: null | ITeamItem = null;
  tableHeaders = [
    {
      text: "Team",
      sortable: false,
      value: "team",
    },
    {
      text: "Description",
      sortable: false,
      value: "description",
    },
    {
      sortable: false,
      align: "right",
      value: "action",
    },
  ];
  items: ITeamItem[] = [];
  getItems() {
    this.loading = true;
    setTimeout(() => {
      this.items = [
        {
          id: "1",
          team: "Team 1",
          description: "Marketing Team",
        },
        {
          id: "2",
          team: "Team 2",
          description: "R & D Team",
        },
        {
          id: "3",
          team: "Team 3",
          description: "Product Developer Team",
        },
      ];
      this.loading = false;
    }, 1500);
  }

  // action
  openAddTeam() {
    this.step = 1;
    this.dialogTitle = "Add Team";
    this.openDialog();
    this.$nextTick(() => {
      (this.$refs.addEditTeam as AddEditTeam).resetForm();
    });
  }

  openEditTeam(item: ITeamItem) {
    this.step = 2;
    this.dialogTitle = "Edit Team";
    this.selectedItem = item;
    this.openDialog();
    this.$nextTick(() => {
      (this.$refs.addEditTeam as AddEditTeam).setFormData(item);
    });
  }

  openDeleteTeam(item: ITeamItem) {
    this.step = 3;
    this.dialogTitle = "Delete Team";
    this.selectedItem = item;
    this.openDialog();
  }

  async save() {
    const addEditTeamRef = this.$refs.addEditTeam as AddEditTeam;
    const result = await addEditTeamRef.validateFormData();
    if (result) {
      if (this.step === 1) {
        result.id = String(new Date().getTime());
        this.items.push(result as ITeamItem);
      } else {
        Object.assign(this.selectedItem as ITeamItem, result);
      }
      this.closeDialog();
    }
  }

  deleteTeam(item: ITeamItem) {
    const index = this.items.indexOf(item);
    this.items.splice(index, 1);
    this.closeDialog();
  }

  created() {
    this.getItems();
  }

  mounted() {
    this.$store.commit("MaintenanceStore/switchActionIcon", "mdi-file-export");
  }
}
</script>

<style lang="scss" scoped>
@import "./Team.scss";
</style>
